<template>
	<view class="container">
		<view class="bg">
			<view class="floor">
				<view class="title">报修单号</view>
				<view class="content">{{dict.no}}</view>
			</view>
			<view class="floor">
				<view class="title">维修类别</view>
				<view class="content">{{dict.applyCategory}}</view>
			</view>
			<view class="floor">
				<view class="title">维修内容</view>
				<view class="content">{{dict.applyContent}}</view>
			</view>
			<view class="floor">
				<view class="title">房间</view>
				<view class="content">{{dict.applyHouse}}</view>
			</view>
			<view class="floor">
				<view class="title">发起人</view>
				<view class="content">{{dict.applyName}}</view>
			</view>
			<view class="floor">
				<view class="title">备注项</view>
				<view class="content">{{dict.remark}}</view>
			</view>
			<view class="floor">
				<view class="title">图片(长按可删除)</view>
				<view class="content" style="border: none;height: 100px;">
					<image :src="item" v-for="(item,index) in picList" @longtap="deleteIt(item,index)"></image>
					<button @click="addPic">+</button>
				</view>
			</view>
		</view>
		<button type="primary" style="width: 80%;margin: 200px auto;" @click="dealIt()">处理</button>
		<button type="primary" style="width: 80%;margin: 200px auto;" @click="dwxdealIt()">待维修</button>
	</view>
</template>

<script>
	import config from '@/config/config.js'
	import {
		flowRepairEdit,
		fileUpload
	} from "@/api/home.js"
	export default {
		data() {
			return {
				picList: [

				],
				dict: {},
				index: 0,
				array: ['已处理', '无法维修'],
				// index: -1,
				current: -1
			}
		},
		onLoad(t) {
			this.dict = JSON.parse(t.detail);
		},
		methods: {
			dealIt() {
				let state = ''
				this.dict.applyImg = this.picList.join(",");
				flowRepairEdit({
					...this.dict,
					state: "已维修"
				}).then(res => {
					if (res.code == 200) {
						uni.showToast({
							title: "操作成功",
							icon: "none",
							duration: 1000,
							success() {
								uni.navigateBack({
									delta: 1
								})
							}
						})
					} else {
						uni.showToast({
							title: "操作失败",
							icon: "none"
						})
					}
				})
			},
			dwxdealIt() {
				let state = ''
				this.dict.applyImg = this.picList.join(",");
				flowRepairEdit({
					...this.dict,
					state: "待维修"
				}).then(res => {
					if (res.code == 200) {
						uni.showToast({
							title: "操作成功",
							icon: "none",
							duration: 1000,
							success() {
								uni.navigateBack({
									delta: 1
								})
							}
						})
					} else {
						uni.showToast({
							title: "操作失败",
							icon: "none"
						})
					}
				})
			},
			// Change: function(evt) {
			// 	for (let i = 0; i < this.array.length; i++) {
			// 		if (this.array[i] === evt.detail.value) {
			// 			this.current = i;
			// 			break;
			// 		}
			// 	}
			// },
			addPic() {
				var that = this;
				uni.chooseImage({
					success(res) {
						console.log(res);
						var arr = res.tempFilePaths;
						for (var i = 0; i < arr.length; i++) {
							uni.uploadFile({
								url: 'https://www.ansteelproperty.com/special/dictionary/files/upload/',
								header: {
									"Authorization": uni.getStorageSync("token"),
									"X-Requested-With": 'XMLHttpRequest',
									"Accept": "application/json"
								},
								method: "post",
								filePath: arr[i],
								fileType: 'image',
								name: 'file',
								formData: {
									'filea': arr[i]
								},
								success: (result) => {
									console.log('result',result)
									var json = JSON.parse(result.data);
									if (json.code == 200) {
										const redirectUri = `${config.baseUrl}`
										that.picList.push(redirectUri + json.msg)
									}
								}
							});
						}
					}
				})
			},
			bindPickerChange: function(e) {
				console.log('picker发送选择改变，携带值为', e.detail.value)
				this.index = e.detail.value
			},
			deleteIt(item, index) {
				var that = this;
				uni.showModal({
					title: "提示",
					content: "是否确认删除",
					success(res) {
						if (res.confirm == true) {
							that.picList.splice(index, 1)
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	uni-input {
		height: 70rpx !important;
		line-height: 70rpx !important;
	}

	.bg {
		background-color: #fff;
	}

	.floor {
		width: 100%;
		overflow: hidden;
		margin-bottom: 5px;

		.title {
			float: left;
			width: 120px;
			line-height: 70rpx;
			text-align: center;
			font-size: 28rpx;
			color: #666666;
			background-color: #fff;
		}

		.content {
			float: left;
			width: calc(100% - 140px);
			height: 70rpx;
			line-height: 70rpx;
			border-bottom: 1px solid #ccc;
			padding: 0 10px;

			uni-button {
				width: 50px;
				height: 50px;
				display: block;
				float: left;
				margin: 10px;
			}

			uni-image {
				width: 50px;
				height: 50px;
				display: block;
				float: left;
				margin: 10px;
			}
		}
	}
</style>